<template>
	<page-header-wrapper>
		<a-card :bordered="false">
			<div class="table-page-search-wrapper">
				<a-form layout="inline">
					<a-row :gutter="24">
						<a-col :md="4" :sm="24">
							<a-form-item>
								<a-input placeholder="请输入名称" v-model="kw" @input='initData(1)' allowClear/>
							</a-form-item>
						</a-col>
						<!-- <a-col :md="4" :sm="24">
							<span class="table-page-search-submitButtons">
								<a-button type="primary" @click="initData(1)" icon="search">查询</a-button>
							</span>
						</a-col> -->
						<a-col :md="1" :sm="24" :offset="18">
							<a-button type="primary" icon="plus" @click='model=1;visible = true'>新增</a-button>
						</a-col>
					</a-row>
				</a-form>
			</div>
			<a-table :dataSource="dataSource" :columns="columns" :pagination="pagination" showPagination="auto" rowKey="id" ref="table" :loading='loading'>
				<span slot="action" slot-scope="text, record">
					<a-button type="primary" size='small' @click='card = record;visible = true;model="2"'>编辑</a-button>
					<a-popconfirm
					  title="确定永久删除该电子卡券吗？"
					  @confirm="handleDel(record)"
					>
						<a-button type="danger" size='small' style="margin:0 12px;">删除</a-button>
					</a-popconfirm>
					<a-button size='small' @click='lookDetail(record)'>查看卡券号</a-button>
				</span>
			</a-table>
			<elector-card ref="createModal" :visible='visible' :model='model' :cardInfo='card' @closeModal='card = {};initData(1)' @ok="card = {};initData(1)" />
		</a-card>
		<!-- 查看卡券号 -->
		<a-modal title="卡券号码" :width="1320" :visible="CouponsFlag" @cancel='CouponsFlag = false' :maskClosable='true'>
			<div class="table-page-search-wrapper" style='margin-bottom:12px;'>
				<a-form layout="inline">
					<a-row :gutter="24">
						<a-col :md="1" :sm="24" :offset="1">
							<a-button type="primary" size='small' style='margin-left:0;' @click='exportExcel'>导出Excel</a-button>
						</a-col>
					</a-row>
				</a-form>
			</div>
			<a-table :dataSource="showCoupon" :columns="columns2" rowKey="id" ref="table2" :pagination="pagination2"></a-table>
			<template slot="footer">
			   <a-button type="primary" @click.stop="()=>{CouponsFlag = false;initCardDetail(1)}">关闭</a-button>
			</template>
		</a-modal>
	</page-header-wrapper>
</template>

<script>
	let columns = [
		{title: '卡券ID',dataIndex: 'id'},
		{title: '卡券名称',dataIndex: 'name'},
		{title: '发放数量',dataIndex: 'send_nums',align:'center'},
		{title: '衣服数量',dataIndex: 'clothes_num',align:'center'},
		{title: '使用次数',dataIndex: 'total_number',align:'center'},
		{title: '门店',dataIndex: 'store'},
		{
			title: '是否制卡',
			dataIndex: 'is_docard',
			customRender:(text,record,index)=>{
				if(text == '1'){
					return '制卡';
				}else if(text == '2'){
					return '店内';
				}
			}
		},
		{title: '周期',dataIndex: 'cycle'},
		{title: '价格',dataIndex: 'price'},
		// {
		// 	title: '状态',
		// 	dataIndex: 'status',
		// 	customRender: (text, record, index) => {
		// 		if (text == '1') {
		// 			return '未激活';
		// 		} else if (text == '2') {
		// 			return '已激活';
		// 		} else if (text == '3') {
		// 			return '已使用';
		// 		}
		// 	},
		// },
		{title: '操作',dataIndex:'action',width:'300px',scopedSlots: { customRender: 'action' },}
	];
	let columns2 = [
		{title: '卡券ID',dataIndex: 'id'},
		{title: '卡券名称',dataIndex: 'name'},
		{title: '卡券号码',dataIndex: 'ecard_no'},
		{title: '绑定门店',dataIndex: 'store'},
		
		{title: '订单号',dataIndex: 'out_trade_no'},
		{title: '价格',dataIndex: 'price'},
		{ 
			title: '是否支付',
			dataIndex: 'is_pay',
			customRender: (text, record, index) => {
				if (text == '0') {
					return '未支付';
				} else if (text == '1') {
					return '已支付';
				}
			},
		},
		{title: '开始时间',dataIndex: 'start_time'},
		{title: '到期时间',dataIndex: 'end_time'},
		{
			title: '状态',
			dcloseModalataIndex: 'status',
			customRender: (text, record, index) => {
				if (text == '1') {
					return '未激活';
				} else if (text == '2') {
					return '已激活';
				} else if (text == '3') {
					return '已使用';
				}
			},
		},
	];
	import {
		cardList,
		cardAdd,
		cardEdit,
		cardDetail,
		cardDel,
		storeList
	} from '@/api/electronCard'
	import XLSX from 'xlsx';
	import electorCard from './modules/electorCard'
	export default {
		name: 'electronCard',
		components: {
			electorCard
		},
		data() {
			return {
				timeName:'卡券列表',
				visible: false,
				model:'1',
				loading:false,
				dataSource: [],
				kw:'',
				card:{},// 被编辑的卡券
				pagination: {
					// 分页配置
					pageSize: 10, // 每页显示的条数
					showSizeChanger: true, // 是否可以改变每页显示的条数
					pageSizeOptions: ['10', '20', '30', '40'], // 可选的每页显示条数
					showQuickJumper: true, // 是否可以快速跳转到指定页
					showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
					current: 1, // 当前页数
					total: 0, // 总条数
					onShowSizeChange:this.initData,//每页显示数改变的回调
					onChange: this.initData // 页码改变时的回调函数
				},
				columns: [],
				// 卡券号码
				lookLine:{},
				CouponsFlag:false,
				coupon:[],
				showCoupon:[],
				columns2: [],
				pagination2:{
					// 分页配置
					pageSize: 10, // 每页显示的条数
					showSizeChanger: true, // 是否可以改变每页显示的条数
					pageSizeOptions: ['10', '20', '30', '40'], // 可选的每页显示条数
					showQuickJumper: true, // 是否可以快速跳转到指定页
					showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
					current: 1, // 当前页数
					total: 0, // 总条数
					onShowSizeChange:this.dealWith_page,//每页显示数改变的回调
					onChange: this.dealWith_page // 页码改变时的回调函数
				}
			}
		},
		created() {
			this.columns = columns;
			this.columns2 = columns2;
			this.initData();
		},
		mounted(){
			this.timeName = this.timeName + new Date().getFullYear() + (new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1))+(new Date().getDate() >= 10 ? new Date().getDate() : '0' + new Date().getDate());
		},
		methods: {
			// 数据
			initData(page, pageSize) {
				if (this.visible) {
					this.visible = false;
				}
				this.loading = true;
				this.pagination.current = page ? page : this.pagination.current;
				this.pagination.pageSize = pageSize ? pageSize : this.pagination.pageSize;
				cardList({
					name:this.kw,
					pageNo: this.pagination.current,
					pageSize: this.pagination.pageSize,
				}).then(res => {
					this.loading = false;
					if (res.status == '0') {
						res.data.data.forEach((item,index)=>{
							item.range = [item.start_time,item.end_time];
						})
						this.dataSource = res.data.data;
						this.pagination.total = res.data.totalCount;
					} else {
						this.$message.error(res.msg);
					}
				}).catch(err => {
					console.log(err);
				})
			},
			// 导出Excel
			exportExcel(){
				const tableData = this.transData(this.columns2,this.coupon);
				// 将一组js数据数组转换为工作表
				const ws = XLSX.utils.aoa_to_sheet(tableData);
				// 创建workBook
				const wb = XLSX.utils.book_new();
				// 将工作表添加到workbook
				XLSX.utils.book_append_sheet(wb,ws,'Sheet1');
				// 将workbook写入文件
				XLSX.writeFile(wb,this.timeName+'.xlsx');
			},
			// 表格数据处理
			transData(column,tableList){
				const obj = column.reduce((acc,cur)=>{
					if(!acc.titles && !acc.keys){
						acc.titles = [];
						acc.keys = [];
					}
					acc.titles.push(cur.title);
					acc.keys.push(cur.dataIndex);
					return acc;
				},{});
				const tableBody = tableList.map((item)=>{
					return obj.keys.map((key)=>{
						if(key == 'status'){
							if(item[key] == '1'){
								return item[key] = '未激活';
							}else if(item[key] == '2'){
								return item[key] = '已激活';
							}else if(item[key] == '3'){
								return item[key] = '已使用';
							}
						}else{
							return item[key]
						}
					});
				});
				return [obj.titles,...tableBody];
			},
			// 删除卡券
			handleDel(line){
				cardDel({
					id:line.id
				}).then(res=>{
					if (res.status == '0') {
						this.initData(1);
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			// 查看卡券列表
			lookDetail(line){
				this.lookLine = line;
				this.initCardDetail();
				this.CouponsFlag = true;
			},
			initCardDetail(page, pageSize){
				this.pagination2.current = page ? page : this.pagination2.current;
				this.pagination2.pageSize = pageSize ? pageSize : this.pagination2.pageSize;
				cardDetail({
					id:this.lookLine.id
				}).then(res=>{
					console.log(res);
					if(res){
						this.coupon = res.data.data;
						this.dealWith_page(this.pagination2.current,this.pagination2.pageSize);
						// this.showCoupon = this.dealWith_page(this.pagination2.current,this.pagination2.pageSize);
						this.pagination2.total = res.data.totalCount;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 卡券详情分页处理
			dealWith_page(page,pageSize){
				this.pagination2.current = page;
				let oldCoupon = JSON.parse(JSON.stringify(this.coupon));
				this.showCoupon = oldCoupon.slice(page * pageSize - pageSize,page * pageSize);
			}
		}
	}
</script>
<style>
	.ant-modal-body{
		padding:12px 24px!important;
	}
</style>
